<template>
  <div class="app-container">
    <list-page-container>
      <template slot="query">
        <el-form :model="tableQueryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="" prop="keyword">
            <el-input
                v-model="tableQueryParams.keyword"
                placeholder="请输入保单名称/保险单号码"
                clearable
                @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="" prop="keyword">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </el-form-item>
          <el-form-item label="保单类型" prop="repairState">
            <el-select placeholder="请选择保单类型" clearable @change="handleQuery"
                       v-model="tableQueryParams.orderType">
              <el-option
                  v-for="dict in dict.type.enum_order_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否上传明细数据" prop="orderDetailState">
            <el-select placeholder="请选择是否上传明细数据" clearable @change="handleQuery"
                       v-model="tableQueryParams.orderDetailState">
              <el-option
                  v-for="dict in dict.type.enum_order_detail_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item placeholder="请选择是否上传gis数据" label="保单类型" prop="orderGisState">
            <el-select placeholder="请选择是否上传gis数据" clearable @change="handleQuery"
                       v-model="tableQueryParams.orderGisState">
              <el-option
                  v-for="dict in dict.type.enum_order_gis_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="保单所属组织" prop="areaCode">
            <el-cascader
                placeholder="请选择保单所属组织"
                @change="handleQuery"
                v-model="tableQueryParams.areaCode"
                :options="areaData"
                :props="{ checkStrictly: true,label:'orgName',value:'orgCode' }"
                clearable></el-cascader>
          </el-form-item>

          <el-form-item label="保单所属年份" prop="orderYear">
            <el-date-picker
                @change="handleQuery"
                v-model="tableQueryParams.orderYear"
                value-format="yyyy"
                type="year"
                placeholder="选择年">
            </el-date-picker>
          </el-form-item>

          <el-form-item prop="orderClaimState">
            <el-select placeholder="请选择是否上传理赔数据" clearable @change="handleQuery"
                       v-model="tableQueryParams.orderClaimState">
              <el-option
                  v-for="dict in dict.type.enum_order_gis_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="orderClaimState">
            <el-select placeholder="请选择是否上传受灾数据" clearable @change="handleQuery"
                       v-model="tableQueryParams.orderDisasterState">
              <el-option
                  v-for="dict in dict.type.enum_order_gis_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="orderClaimState">
            <el-select placeholder="请选择是否上传抽查数据" clearable @change="handleQuery"
                       v-model="tableQueryParams.orderNyjClaimState">
              <el-option
                  v-for="dict in dict.type.enum_order_gis_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>


        </el-form>
      </template>

      <template slot="handel">
        <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
        >删除
        </el-button>
        <el-button type="primary" icon="el-icon-search" size="mini"
                   @click="startUploadData(uploadListFileHintName, listFileUid, listFileDownloadUrl,uploadListFileType)">
          {{ `导入${uploadListFileHintName}` }}
        </el-button>
        <el-button type="primary" icon="el-icon-search" size="mini"
                   @click="startUploadData(uploadDetailFileHintName, detailFileUid, detailFileDownloadUrl,uploadDetailFileType)">
          {{ `导入${uploadDetailFileHintName}` }}
        </el-button>
        <el-button type="primary" icon="el-icon-search" size="mini"
                   @click="startUploadData(uploadDisasterFileHintName, disasterFileUid, disasterFileDownloadUrl,uploadDisasterFileType)">
          {{ `导入${uploadDisasterFileHintName}` }}
        </el-button>
        <el-button type="primary" icon="el-icon-search" size="mini"
                   @click="startUploadData(uploadClaimSettlementFileHintName, claimSettlementFileUid, claimSettlementFileDownloadUrl,uploadClaimSettlementFileType)">
          {{ `导入${uploadClaimSettlementFileHintName}` }}
        </el-button>
        <el-button type="primary" icon="el-icon-search" size="mini"
                   @click="startUploadData(uploadSpotCheckFileHintName, spotCheckFileUid, spotCheckFileDownloadUrl,uploadSpotCheckFileType)">
          {{ `导入${uploadSpotCheckFileHintName}` }}
        </el-button>
        <el-button type="primary" icon="el-icon-download" size="mini" @click="exportChitData">导出保单</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini"
                   @click="showExportTask">
          查看导入任务
        </el-button>
        <el-button type="primary" icon="el-icon-share" size="mini" @click="listPublicity">清单公示</el-button>
      </template>


      <template slot="table">
        <el-table @selection-change="handleSelectionChange" @sort-change="handleSortChange" height="100%"
                  v-loading="loading" :data="dataList">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="所属地域" width="120" align="center" prop="areaName"/>
          <el-table-column label="保单号" width="200" align="center" prop="bxdhm"/>
          <el-table-column label="投保单号" width="200" align="center" prop="tbdh"/>
          <el-table-column label="保单类型" align="center" prop="orderTypeName"/>
          <el-table-column label="险种代码" align="center" prop="xzdm"/>
          <el-table-column label="险种名称" align="center" prop="xzmc"/>
          <el-table-column label="总保费（元）" align="center" prop="zbf"/>
          <el-table-column :width="stateColumnWidth" label="是否上传保单明细" align="center" prop="orderDetailState">
            <template slot-scope="scope">
              <el-tag :type="scope.row.orderDetailState == '0' ? 'warning' : 'success'">
                {{ scope.row.orderDetailState == '0' ? '未上传' : '已上传' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :width="stateColumnWidth" label="是否上传受灾数据" align="center" prop="orderDisasterState">
            <template slot-scope="scope">
              <el-tag :type="scope.row.orderDisasterState == '0' ? 'warning' : 'success'">
                {{ scope.row.orderDisasterState == '0' ? '未上传' : '已上传' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :width="stateColumnWidth" label="是否上传理赔数据" align="center" prop="orderClaimState">
            <template slot-scope="scope">
              <el-tag :type="scope.row.orderClaimState == '0' ? 'warning' : 'success'">
                {{ scope.row.orderClaimState == '0' ? '未上传' : '已上传' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :width="stateColumnWidth" label="是否上传抽查数据" align="center" prop="orderNyjClaimState">
            <template slot-scope="scope">
              <el-tag :type="scope.row.orderNyjClaimState == '0' ? 'warning' : 'success'">
                {{ scope.row.orderNyjClaimState == '0' ? '未上传' : '已上传' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :width="stateColumnWidth" label="是否上传空间数据" align="center" prop="orderGisState">
            <template slot-scope="scope">
              <el-tag :type="scope.row.orderGisState == '0' ? 'warning' : 'success'">
                {{ scope.row.orderGisState == '0' ? '未上传' : '已上传' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :width="stateColumnWidth" label="是否预警" align="center" prop="sfyj">
            <template slot-scope="scope">
              <el-tag :type="scope.row.sfyj == '0' ? 'warning' : 'success'">
                {{ scope.row.sfyj == '0' ? '否' : '是' }}
              </el-tag>
            </template>
          </el-table-column>
<!--          <el-table-column :width="stateColumnWidth" label="核心系统上传状态" align="center" prop="orderGisUploadState">-->
<!--            <template slot-scope="scope">-->
<!--              <el-tag-->
<!--                  :type="scope.row.orderGisUploadState == '0' ? 'warning' : (scope.row.orderGisUploadState == '1' ? 'success' : 'danger') ">-->
<!--                {{-->
<!--                  scope.row.orderGisUploadState == '0' ? '未上传' : (scope.row.orderGisUploadState == '1' ? '成功' : '失败')-->
<!--                }}-->
<!--              </el-tag>-->
<!--            </template>-->
<!--          </el-table-column>-->

          <el-table-column width="200" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleInfo(scope.row)"
              >查看
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
              >删除
              </el-button>
              <el-button
                  v-if="scope.row.sfgd == 0 || scope.row.sfgd == null"
                  size="mini"
                  type="text"
                  icon="el-icon-folder"
                  @click="pigeonhole(scope.row)"
              >归档
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-cpu"
                  @click="computePrice(scope.row)"
              >计算
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template slot="pageDisplay">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="tableQueryParams.pageNum"
            :limit.sync="tableQueryParams.pageSize"
            @pagination="getList"
        />
      </template>


    </list-page-container>

    <upload-data :upload-file-type="uploadFileType" :title="uploadFileTitle" :hint-file-name="uploadHintFileName"
                 ref="uploadData"></upload-data>

    <el-dialog
        title="金额"
        :visible.sync="dialogVisible"
        width="30%"
        @close="closeDialog">
      <div>
<!--        <el-empty description="暂无数据"></el-empty>-->

        <el-statistic
            group-separator=","
            :precision="2"
            :value="claimAmount"
            title="理赔金额"
        ></el-statistic>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import {listPageMixins} from "@/mixins/listPageMixins";
import {FILE_TYPE, HIDDEN_DANGER_WIDTH} from "@/constantData";
import {isArr} from "@/utils/arrayUtil";
import ShowFileList from "@/components/ShowFileList/index.vue";
import guid from "@/utils/guid";
import {
  deleteOrder,
  importDisasterData,
  queryOrderBase,
  archivist,
  computeBF,
} from "@/api/chit/chitListPage";
import UploadData from "@/components/UploadData/index.vue";
import {exportFile} from "@/utils/exportFile";
import {listDept} from "@/api/system/dept";
import {getAreaData} from "@/utils/getAreaData";

export default {
  dicts: ['enum_order_type', 'enum_order_detail_state', 'enum_order_gis_state', 'enum_order_gis_upload_state'],
  mixins: [listPageMixins],
  components: {
    ShowFileList,
    UploadData
  },
  data() {
    return {
      dialogVisible:false,//价格弹窗
      claimAmount:'', //理赔金额

      stateColumnWidth: 80,
      HIDDEN_DANGER_WIDTH,
      modelName: '保单',
      // 查询参数
      queryParams: {
        // 所属地域
        areaCode: null,
        // 所属年份(也加在列表上)
        orderYear: null,
        // 理赔数据状态
        orderClaimState: null,
        // 受灾数据状态
        orderDisasterState: null,
        // 抽查数据状态
        orderNyjClaimState: null,
        // 保单类型
        orderType: null,
        // 保单名称/号码
        keyword: null,
        orderGisState: null,
        orderDetailState: null,
        orderGisUploadState: null,
      },
      otherQueryParam: {},
      getListFun: queryOrderBase,
      deleteFun: deleteOrder,
      archivist:archivist,

      areaData: [],

      listFileUid: `f${guid()}`,
      listFileDownloadUrl: `/business/insuranceOrder/orderManager/exportOrderBaseTemplate`,
      importListDataViewPath: `/chit/importChitListData`,
      uploadListFileHintName: '保单数据',
      uploadListFileType: FILE_TYPE.EXCEL,

      detailFileUid: `f${guid()}`,
      detailFileDownloadUrl: `/business/insuranceOrder/orderDetailManager/exportOrderDetailTemplate`,
      importDetailDataViewPath: `/chit/importChitLDetailData`,
      uploadDetailFileHintName: '保单明细数据',
      uploadDetailFileType: FILE_TYPE.RAR,

      disasterFileUid: `f${guid()}`,
      disasterFileDownloadUrl: `/business/insuranceOrder/disaster/exportOrderDisasterGisTemplate`,
      uploadDisasterFileHintName: '受灾数据',
      uploadDisasterFileType: FILE_TYPE.RAR,

      claimSettlementFileUid: `f${guid()}`,
      claimSettlementFileDownloadUrl: `/business/insuranceOrder/orderClaim/exportBxgsClaimTemplate`,
      importClaimSettlementDataViewPath: `/chit/importClaimSettlementData`,
      uploadClaimSettlementFileHintName: '理赔数据',
      uploadClaimSettlementFileType: FILE_TYPE.RAR,

      spotCheckFileUid: `f${guid()}`,
      spotCheckFileDownloadUrl: `/business/insuranceOrder/orderClaim/exportNyjClaimTemplate`,
      importSpotCheckDataViewPath: `/chit/importSpotCheckData`,
      uploadSpotCheckFileHintName: '抽查数据',
      uploadSpotCheckFileType: FILE_TYPE.RAR,


      uploadFileTitle: '',
      uploadHintFileName: '',
      uploadFileType: '',
    }
  },
  computed: {
    listFile() {
      let res = this.$store.state.temporaryFile.temporaryFileList
      let {listFileUid: fileId} = this
      return isArr(res) && res.some(item => item.uid == fileId) ? res.find(item => item.uid == fileId).fileList : []
    },
    detailFile() {
      let res = this.$store.state.temporaryFile.temporaryFileList
      let {detailFileUid: fileId} = this
      return isArr(res) && res.some(item => item.uid == fileId) ? res.find(item => item.uid == fileId).fileList : []
    },
    claimSettlementFile() {
      let res = this.$store.state.temporaryFile.temporaryFileList
      let {claimSettlementFileUid: fileId} = this
      return isArr(res) && res.some(item => item.uid == fileId) ? res.find(item => item.uid == fileId).fileList : []
    },
    disasterFile() {
      let res = this.$store.state.temporaryFile.temporaryFileList
      let {disasterFileUid: fileId} = this
      return isArr(res) && res.some(item => item.uid == fileId) ? res.find(item => item.uid == fileId).fileList : []
    },
    spotCheckFile() {
      let res = this.$store.state.temporaryFile.temporaryFileList
      let {spotCheckFileUid: fileId} = this
      return isArr(res) && res.some(item => item.uid == fileId) ? res.find(item => item.uid == fileId).fileList : []
    },
  },
  watch: {
    listFile(fileList) {
      let {listFileUid: uid, importListDataViewPath: viewPath} = this
      this.endImportFileAndGoDataPage(fileList, uid, viewPath)
    },
    detailFile(fileList) {
      let {detailFileUid: uid, importDetailDataViewPath: viewPath} = this
      this.endImportFileAndGoDataPage(fileList, uid, viewPath)
    },
    claimSettlementFile(fileList) {
      let {claimSettlementFileUid: uid, importClaimSettlementDataViewPath: viewPath} = this
      this.endImportFileAndGoDataPage(fileList, uid, viewPath)
    },
    spotCheckFile(fileList) {
      let {spotCheckFileUid: uid, importSpotCheckDataViewPath: viewPath} = this
      this.endImportFileAndGoDataPage(fileList, uid, viewPath)
    },
    disasterFile(fileList) {
      let {disasterFileUid: uid,} = this
      this.endImportDisasterFile(fileList, uid,)
    },
  },
  methods: {
    showPrice(row){
      this.dialogVisible = true;

    },

    closeDialog() {
      this.dialogVisible = false;
    },
    //自动计算价格
    computePrice(row){
      computeBF(row.id).then(res => {
        if(res && res.code==200 && res.data){
          this.claimAmount = res.data;
          this.showPrice();
        }
      })

    },

    updateQueryParams(params) {
      let resultParams = _.cloneDeep(params)
      if (isArr(resultParams?.areaCode)) {
        resultParams.areaCode = params.areaCode.at(-1)
      }
      return resultParams
    },
    exportChitData() {
      let {queryParams} = this
      exportFile({
        path: '/business/insuranceOrder/orderManager/exportOrderBase',
        fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        params: queryParams,
        fileName: '保单数据.xls',
        method: 'get'
      }).then(res => {
        this.$message.success('导出成功')
      })
    },
    //清单公示
    listPublicity() {
      let {queryParams} = this
      exportFile({
        // path: '/business/insuranceOrder/orderManager/exportOrderBase',
        path: '/business/insuranceOrder/orderManager/exportOrderBaseLpqd',
        fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        params: queryParams,
        fileName: '保单数据.xls',
        method: 'get'
      }).then(res => {
        this.$message.success('导出成功')
      })
    },
    endImportFile(fileList, uid) {
      const fileId = this.getFileIdByFileList(fileList);
      if (fileId == null || fileId == '') {
        return fileId
      }
      this.$refs.uploadData.endImportData()
      this.clearFileList(uid)
      return fileId
    },
    endImportDisasterFile(fileList, uid,) {
      const fileId = this.endImportFile(fileList, uid);
      if (fileId == null || fileId == '') {
        return
      }
      this.startLoading('正在加载....')
      let owner = this
      importDisasterData({fileId}).then(res => {
        owner.$modal.msgSuccess('导入任务创建成功')
      }).finally(() => {
        owner.endLoading();
      })
    },
    endImportFileAndGoDataPage(fileList, uid, viewPath) {
      const fileId = this.endImportFile(fileList, uid)
      this.goImportDataPage(fileId, viewPath)
    },
    goImportDataPage(fileId, viewPath) {
      if (fileId != null && fileId !== '') {
        this.goView(fileId, viewPath)
      }
    },
    getFileIdByFileList(fileList) {
      let fileIds = isArr(fileList) ? fileList.map(file => file.fileId) : [];
      let fileId = isArr(fileIds) ? fileIds[0] : ''
      return fileId
    },
    clearFileList(uid) {
      this.$store.commit('temporaryFile/REMOVE_ALL_FILE', uid)
    },
    startUploadData(uploadHintFileName, uid, downloadFileUrl, uploadFileType) {
      this.setUploadTextAndFileType(`导入${uploadHintFileName}`, uploadHintFileName, uploadFileType);
      this.$refs.uploadData.startImportData(uid, downloadFileUrl)
    },
    setUploadTextAndFileType(uploadFileTitle, uploadHintFileName, uploadFileType) {
      this.uploadFileTitle = uploadFileTitle
      this.uploadHintFileName = uploadHintFileName
      this.uploadFileType = uploadFileType
    },
    goView(fileId, path) {
      if (fileId == null || fileId === '') return;
      this.$router.push({path, query: {fileId}})
    },
    handleAdd() {
      this.$router.push({path: '/chit/chitAdd'})
    },
    handleUpdate(row) {
      this.$router.push({path: '/chit/chitAdd', query: {chitId: row.id}})
    },
    handleInfo(row) {
      this.$router.push({path: '/chit/chitInfoLook', query: {chitId: row.id}})
    },
    showExportTask() {
      this.$router.push({path: '/system/importTaskListPage'})
    },
    async initAreaData() {
      let {threeData,baseData} = await getAreaData();
      this.areaData = threeData
    }
  },
  created() {
    this.initAreaData()
  }
}
</script>

<style scoped>

</style>
